import React, { PureComponent } from 'react'
import classNames from 'classnames'

export default class App extends PureComponent {
  constructor() {
    super()
    this.state = {
      isActive: true,
      isColor: false
    }
  }
  
  render() {
    const { isActive, isColor } = this.state
    
    const classList = ["title-wrapper"]
    if (isActive) classList.push("title-h1")
    if (isColor) classList.push("title-h2")
    const classname = classList.join(" ")
    return (
      <div>
        <h3 className={`title ${isActive ? "active" : ""} ${isColor ? "color" : ""}`}>classNames title</h3>
        <div className={classname}>classname content</div>

        <h3 className={classNames("title", { active: isActive, color: isColor })}>classNames title</h3>
        <p className={classNames(["content", { active: isActive, color: isColor }])}></p>
      </div>
    )
  }
}
